<template>
    <div class="edit-page clear-float">
        <div class="alert">
            <div class="alert-box">
                <div class="edit-wrap clear-float">
                    <div class="add-class">
                        <h2>添加班级</h2>
                        <i class="el-icon-close close" @click="cancel"></i>
                        <el-form ref="form-class" :model="formClass" label-width="80px" class="add-class-form" label-position="left">
                            <el-form-item label="班级名称">
                                <el-input v-model="formClass.className"></el-input>
                            </el-form-item>
                            <!-- <el-form-item label="教材(册)" prop="textbooks">
                                <el-select v-model="formClass.textbooks" placeholder="请选择教材" class="select-block" @change="chooseStudent">
                                    <el-option :label="v.mc" :value="v.id + ''" v-for="v in bookList"></el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="教材(册)">
                                <el-cascader
                                    v-model="formClass.textbooks"
                                    :options="bookList"
                                    @active-item-change="handleItemChange"
                                    @change="demo"
                                    :props="props"
                                    class="select-block"
                                    clearable
                                ></el-cascader>
                            </el-form-item>
                            


                            <el-form-item label="老师" prop="teachers">
                                <el-select v-model="formClass.teachers" placeholder="请选择老师" class="select-block">
                                    <el-option :label="v.zwm" :value="v.id + ''" v-for="v in teacherList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="副班主任" prop="teacherBoss">
                                <el-select v-model="formClass.teacherBoss" placeholder="请选择副班主任" class="select-block">
                                    <el-option :label="v.zwm" :value="v.id + ''" v-for="v in teacherBossList"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="开班日期" prop="classDate">
                                <el-input v-model="formClass.classDate"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>

                <el-button type="info" class="submit" @click="submit">提交</el-button>
                <el-button @click="cancel" type="text">取消</el-button>
            </div>
        </div>
        <LoadingComponent v-if="isLoading"></LoadingComponent>
    </div>
</template>

<script type="text/javascript">
    import LoadingComponent from 'components/loading'
    export default {
        components: { LoadingComponent },
        data () {
            return {
                formClass: {
                    className: '',
                    textbooks: [],
                    teachers: '', //老师
                    teacherBoss: '',  //副班主任
                    studentNumber: '',
                    classDate: ''
                },
                studentSeach: {
                    phoneNumber: '',
                    students: ''
                },
                props: {
                    value: 'id',
                    label: 'mc',
                    children: 'arr'
                },
                idArr: [],
                isLoading:false,

                bookList: [],
                teacherList: [], //老师列表
                teacherBossList: [], //副班主任列表

                studentTitleList: [],
                addStudentList: [],
                rulesClass: {
                    className: [
                        { required: true, message: '请输入班级名称', trigger: 'blur' }
                    ],
                    // textbooks: [
                    //     { required: true, message: '请选择教材(册)', trigger: 'change' }
                    // ],
                    // teachers: [
                    //     { required: true, message: '请选择老师', trigger: 'change' }
                    // ],
                    // teacherBoss: [
                    //     { required: true, message: '请选择副班主任', trigger: 'change' }
                    // ],
                    // studentNumber: [
                    //     { required: true, message: '学生人数不能为空'},
                    //     { type: 'number', message: '学生人数必须为数字值'}
                    // ],
                    classDate: [
                        { required: true, message: '请输入开班日期', trigger: 'blur' }
                    ]
                    
                }
            }
        },
        created () {
            this.$store.dispatch('changeTitle',"编辑")
            this.getteacherList()
            this.getBookList()
        },
        methods: {
            handleSelectionChange(val) {
                console.log(val)
            },
            demo () {
                console.log(this.bookList)

            },
            handleItemChange (val) {
                console.log('active item:', val);
                var index = this.idArr.indexOf(val[0]);
                // console.log(this.idArr);
                console.log(index)
                // console.log(this.bookList)
                this.axios.get(this.$store.state.api + 'c/clist', {
                    params: {
                        jcid:val[0]
                    }
                }).then( res => {
                    // console.log(res)
                    var list = res.data.data.list;
                    this.bookList[index].arr = list;
                }).catch( res => {
                    console.log(res)
                })
                    // setTimeout(_ => {
                    //   if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {
                    //     this.options2[0].cities = [{
                    //       label: '南京'
                    //     }];
                    //   } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {
                    //     this.options2[1].cities = [{
                    //       label: '杭州'
                    //     }];
                    //   }
                    // }, 300);
            },
            getteacherList () {
                this.axios.get(this.$store.state.api + 'ls/list')
                    .then( res => {
                        console.log(res)
                        let list = res.data.data.list;
                        list.forEach( (v,i) => {
                            if (v.iszj == "Y") {
                                this.teacherBossList.push(v)
                            }else{
                                this.teacherList.push(v)
                            }
                        })
                    }).catch( res => {
                        console.log(res)
                    })
            },
            getBookList () {
                this.axios.get(this.$store.state.api + 'jc/list')
                    .then( res => {
                        console.log(res)
                        this.bookList = res.data.data.list;

                        this.bookList.forEach( v => {
                            v.arr = [];
                            this.idArr.push( v.id )
                        })

                    }).catch( res => {
                        console.log(res)
                    })
            },

            chooseStudent(val) {
                console.log(val)
                this.axios.get(this.$store.state.api + 'ordermx/xslist?jcid='+val)
                    .then( res => {
                        console.log(res)
                    }).catch( res => {
                        console.log(res)
                    })
            },

            submit () {
                // this.isLoading = true;
                this.$store.state.loading = true;
                if (!this.formClass.className) {
                    this.$message.warning('请填写班级名称');
                    return null;
                }else if (!this.formClass.textbooks[0]) {
                    this.$message.warning('请选择教材');
                    return null;
                }else if (!this.formClass.teachers) {
                    this.$message.warning('请选择老师');
                    return null;
                }else if (!this.formClass.teachers) {
                    this.$message.warning('请填写开班日期');
                    return null;
                }else{
                    console.log('OK')
                }

                this.axios.get(this.$store.state.api + 'bj/add', {
                    params: {
                        mc: this.formClass.className,
                        jcid: this.formClass.textbooks[0],
                        cid: this.formClass.textbooks[1],
                        lsid: this.formClass.teachers,
                        zjid: this.formClass.teacherBoss,
                        sj: this.formClass.classDate,
                        xs: this.formClass.studentNumber
                    }
                }).then( res => {
                    console.log(res)
                    this.$emit('close',{type:'add',cancel:false})
                    // this.isLoading = false;
                    this.$store.state.loading = false;
                }).catch( res => {
                    console.log(res)
                    alert("添加数据失败")
                    // this.isLoading = false;
                    this.$store.state.loading = false;
                    // this.$emit('close','add')
                })


                // this.$refs['form-class'].validate((valid) => {
                //     // console.log(valid)
                //     if (valid) {
                //         this.axios.get(this.$store.state.api + 'bj/add', {
                //             params: {
                //                 mc: this.formClass.className,
                //                 jcid: this.formClass.textbooks[0],
                //                 cid: this.formClass.textbooks[1],
                //                 lsid: this.formClass.teachers,
                //                 zjid: this.formClass.teacherBoss,
                //                 sj: this.formClass.classDate,
                //                 xs: this.formClass.studentNumber
                //             }
                //         }).then( res => {
                //             console.log(res)
                //             this.$emit('close',{type:'add',cancel:false})
                //             this.isLoading = false;
                //         }).catch( res => {
                //             console.log(res)
                //             alert("添加数据失败")
                //             this.isLoading = false;
                //             // this.$emit('close','add')
                //         })
                //         // alert("OK")
                //     } else {
                //         alert("添加数据失败")
                //         this.isLoading = false;
                //         // alert("NO")
                //     }
                // });
            },
            cancel () {
               this.$emit('close',{type:'add',cancel:true})
            }
        },
        watch: {
            bookList () {
                // this.bookList.forEach( v => {
                //     v.arr = [];
                // })
                console.log(this.bookList)
            }
        }
    }
</script>

<style lang="less" scoped>
    .edit-page {
        position: fixed;
        left:0;right:0;top:0;bottom:0;
        margin:auto;
        z-index: 999;

        .alert-box {
            width:45%;
            padding:30px 100px;
            padding-top:0px;
        }

        .select-block{
            display: block;
        }
        
        h2{
            text-align: center;
            line-height: 40px;
        }
        .left, .right {
            float: left;
            width: 50%;
            padding:10px 20px;
        }
        .left{
            border-right:1px solid #ccc;
        }
        .right {
            text-align: left;
        }
        .submit{
            width: 150px;
            margin:30px auto;
            margin-bottom:0;
        }

        .search-item {
            margin-right:10px;
        }

        .code-search {
            width: 250px;
            height: 30px;
            margin:10px 0 10px 0;
        }
    }
</style>